﻿@{
    ViewBag.Title = "地区管理";

}
@section styles{
    <link href="~/static/css/Ztree.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/metroStyle.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/public.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/client.css" type="text/css" rel="stylesheet" />
}
<style>
    a {
        text-decoration: none;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                @*<div class="layui-card-header">@ViewBag.Title </div>*@
                <div class="layui-title layui-clear layui-row">
                    <div class="layui-col-md2 layui-col-sm3 layui-col-xs5 layui-nav-item" style="float:right;">
                        <a class="layui-btn" onclick="Generate()">更新搜索引擎</a>
                    </div>
                </div>
                <div class="layui-card-body">
                    <blockquote class="layui-elem-quote">注：新增修改选择多个地区信息时默认选择第一个进行操作</blockquote>
                </div>
                <div class="layui-card-body layui-col-md4">
                    <div class="layui-row" style="padding-left:5px;">
                        <div class="layui-btn-group parent-type layui-col-md4">
                            <button class="layui-btn layui-btn-sm" data-type="Create" data-level="1">
                                <i class="layui-icon">&#xe654;</i>
                            </button>
                            <button class="layui-btn layui-btn-sm" data-type="Edit" data-level="1">
                                <i class="layui-icon">&#xe642;</i>
                            </button>
                            <button class="layui-btn layui-btn-sm" data-type="Delete" data-level="1">
                                <i class="layui-icon">&#xe640;</i>
                            </button>
                            <button class="layui-btn layui-btn-sm">
                                <i class="layui-icon">&#xe602;</i>
                            </button>
                        </div>
                        <div class="layui-col-md8">
                            <div class="demoTable">
                                <div class="layui-inline">
                                    <input class="layui-input" name="keyword" placeholder="地区名称" autocomplete="off">
                                </div>
                                <button class="layui-btn search" data-type="reload" data-level="1">搜索</button>
                            </div>
                        </div>
                    </div>
                    <table class="layui-hide layui-table" id="layui-table1" lay-filter="Event"></table>
                </div>
                <div class="layui-card-body layui-col-md4">
                    <div class="layui-row" style="padding-left:5px;">
                        <div class="layui-btn-group parent-type layui-col-md4">
                            <button class="layui-btn layui-btn-sm" data-type="Create" data-level="2">
                                <i class="layui-icon">&#xe654;</i>
                            </button>
                            <button class="layui-btn layui-btn-sm" data-type="Edit" data-level="2">
                                <i class="layui-icon">&#xe642;</i>
                            </button>
                            <button class="layui-btn layui-btn-sm" data-type="Delete" data-level="2">
                                <i class="layui-icon">&#xe640;</i>
                            </button>
                            <button class="layui-btn layui-btn-sm">
                                <i class="layui-icon">&#xe602;</i>
                            </button>
                        </div>
                        <div class="layui-col-md8">
                            <div class="demoTable">
                                <div class="layui-inline">
                                    <input class="layui-input" name="keyword" placeholder="地区名称" autocomplete="off">
                                </div>
                                <button class="layui-btn search" data-type="reload" data-level="2">搜索</button>
                            </div>
                        </div>
                    </div>

                    <table class="layui-hide layui-table" id="layui-table2" lay-filter="Event"></table>
                </div>
                <div class="layui-card-body layui-col-md4">
                    <div class="layui-row" style="padding-left:5px;">
                        <div class="layui-btn-group parent-type layui-col-md4">
                            <button class="layui-btn layui-btn-sm" data-type="Create" data-level="3">
                                <i class="layui-icon">&#xe654;</i>
                            </button>
                            <button class="layui-btn layui-btn-sm" data-type="Edit" data-level="3">
                                <i class="layui-icon">&#xe642;</i>
                            </button>
                            <button class="layui-btn layui-btn-sm" data-type="Delete" data-level="3">
                                <i class="layui-icon">&#xe640;</i>
                            </button>
                            <button class="layui-btn layui-btn-sm">
                                <i class="layui-icon">&#xe602;</i>
                            </button>
                        </div>
                        <div class="layui-col-md8">
                            <div class="demoTable">
                                <div class="layui-inline">
                                    <input class="layui-input" name="keyword" placeholder="地区名称" autocomplete="off">
                                </div>
                                <button class="layui-btn search" data-type="reload" data-level="3">搜索</button>
                            </div>
                        </div>
                    </div>
                    <table class="layui-hide layui-table" id="layui-table3"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Layer_ajax"></div>


@section scripts{
    <script src="~/static/js/jquery.ztree.core.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.ztree.excheck.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.ztree.exedit.js" type="text/javascript"></script>

    <script type="text/javascript">
        layui.use(['form', 'layedit', 'table', 'layer', 'element'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , table = layui.table;

            table.render({
                elem: "#layui-table1",
                url: '/Region/GetRegionList',
                cellMinWidth: 26,
                cols: [[
                    { type: 'checkbox' },
                    { field: 'name', title: '地区名称', event: 'setSign' },
                ]],
                id: "table1",
                height: 'full-230',
                page: false,
                done: function (res, curr, count) {
                    if (res.data.length > 0) {
                        var id = res.data[0].id;
                        table.render({
                            elem: "#layui-table2",
                            url: '/Region/GetRegionList',
                            where: { parentid: id },
                            cellMinWidth: 26,
                            height: 'full-230',
                            cols: [[
                                { type: 'checkbox' },
                                { field: 'name', title: '地区名称', event: 'setChild' },
                            ]],
                            id: "table2",
                            page: false,
                            done: function (res2, curr2, count2) {
                                if (res2.data.length > 0) {
                                    var id2 = res2.data[0].id;
                                    table.render({
                                        elem: "#layui-table3",
                                        url: '/Region/GetRegionList',
                                        where: { parentid: id2 },
                                        cellMinWidth: 26,
                                        height: 'full-230',
                                        cols: [[
                                            { type: 'checkbox' },
                                            { field: 'name', title: '地区名称' },
                                        ]],
                                        id: "table3",
                                        page: false
                                    });
                                }
                            }
                        });
                    }
                }
            });

            table.on('tool(Event)', function (obj) {
                var data = obj.data;
                if (obj.event === 'setSign') {
                    table.reload('table2', {
                        where: {
                            parentid: data.id,
                        }
                    })
                } else if (obj.event === 'setChild') {
                    table.reload('table3', {
                        where: {
                            parentid: data.id,
                        }
                    })
                }

            });
            var $ = layui.$, active = {
                Create: function (level) {
                    var checkStatus;
                    var parentid = "";
                    if (level == 2) {
                        checkStatus = table.checkStatus('table1');
                        if (checkStatus.data.length == 0) {
                            layer.msg("请先选择一个省级地区！");
                            return false;
                        }
                        parentid = checkStatus.data[0].id;
                    } else if (level == 3) {
                        checkStatus = table.checkStatus('table2');
                        if (checkStatus.data.length == 0) {
                            layer.msg("请先选择一个区县地区！")
                            return false;
                        }
                        parentid = checkStatus.data[0].id;
                    }
                    LayerOpen("添加地区", "/Region/Create?parentid=" + parentid);
                }
                , Edit: function (level) {
                    var checkStatus;
                    if (level == 1) {
                        checkStatus = table.checkStatus('table1')
                    } else if (level == 2) {
                        checkStatus = table.checkStatus('table2')
                    } else if (level == 3) {
                        checkStatus = table.checkStatus('table3')
                    }
                    var data = checkStatus.data;
                    if (data.length > 0) {
                        LayerOpen("编辑地区-" + data[0].name, "/Region/Edit?id=" + data[0].id);
                    }
                    else {
                        layer.msg("请选择一个地区进行编辑！")
                    }
                }
                , Delete: function (level) {
                    var checkStatus;
                    if (level == 1) {
                        checkStatus = table.checkStatus('table1')
                    } else if (level == 2) {
                        checkStatus = table.checkStatus('table2')
                    } else if (level == 3) {
                        checkStatus = table.checkStatus('table3')
                    }
                    var data = checkStatus.data;
                    if (data.length > 0) {
                        var ids = new Array();
                        var names = new Array();
                        for (var i = 0; i < data.length; i++) {
                            ids.push(data[i].id);
                            names.push(data[i].name);
                        }
                        layer.confirm('确认删除：[' + names.join("|") + "] 吗？", function (index) {
                            $.post("/Region/Delete", { ids: ids.join("|") }, function (obj, successInfo) {
                                CommonAjaxCallback(obj, function () {
                                    table.reload('idTest', {
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                    })
                                }, successInfo)
                            })
                            layer.close(index);
                        });
                    }
                    else {
                        layer.msg("请至少选择一个地区信息！")
                    }
                }
            };

            $('.parent-type .layui-btn').on('click', function () {
                var type = $(this).data('type');

                var level = $(this).data('level');
                active[type] ? active[type].call(this, level) : '';
            });

            $(".search").on('click', function () {
                var level = $(this).data('level');
                var keyword = $(this).prev().find("input[name='keyword']").val();
                if (level == 1) {
                    table.reload('table1', {
                        where: { keyword: keyword }
                    })
                } else if (level == 2) {
                    table.reload('table2', {
                        where: { keyword: keyword }
                    })
                } else if (level == 3) {
                    table.reload('table3', {
                        where: { keyword: keyword }
                    })
                }

            });

            function LayerOpen(title, url) {
                var open = layer.open({
                    type: 2,
                    title: title,
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['600px', '450px'],
                    content: url,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index)//确定两个页面的父子关系
                    },
                    end: function () {
                        //销毁后重新加载
                        table.reload('table1', {
                        })
                    }
                });
            }
        });


        function Generate() {
            layer.confirm('确认更新搜索引擎数据吗？', function (index) {
                $.get("/Region/Generate", function (data) {
                    if (data.success) {
                        layer.msg("操作成功");
                    }
                    else {
                        layer.msg("操作失败");
                    }
                })
            });
        }

        $("#layui-Area").click(function () {
            $(".layui-Area .layui-Area-hide").toggleClass("layui-Area-show")
            $(this).parent(".layui-form-select").toggleClass("layui-form-selected");
        });

        $(".layui-Area").mouseleave(function () {
            $(".layui-Area .layui-Area-hide").removeClass("layui-Area-show")
        })

    </script>
}
